// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import Qt 4.7


Item {
    width: 679
    height: 459
    id: item

    Rectangle{
        anchors.fill:parent
        color: "black"
        opacity: 0.8
        visible: false
        id:fog
    }

    Image{
        id: back
        fillMode: Image.PreserveAspectFit
        source: "images/ui/movie_panel.png"

    }

    Sprite{
        anchors.bottom: back.bottom
        anchors.right: back.right
        anchors.rightMargin: 12
        anchors.bottomMargin: 12
        source: "images/ui/buttons/btn_fullscreen.png"
        grid_x:2
        grid_y:1
        MouseArea{
            anchors.fill: parent
            onClicked: item.state = item.state=="fullscreen"?"windowed":"fullscreen"
        }
    }
    onHeightChanged: resizeAspectRatio()
    onWidthChanged: resizeAspectRatio()

    function resizeAspectRatio(){
        var image_aspect = 679.0/459.0
        var window_aspect = item.width*1.0/item.height
        if (image_aspect>window_aspect){
            back.width = item.width
            back.height = back.width/679.0*459.0
        }else{
            back.height = item.height
            back.width = item.height/459.0*679.0
        }
        console.log(back.width, back.height)

    }


    states: [
        State{
            name: "fullscreen"
            PropertyChanges{
                target: item
                width: item.parent.width
                height: item.parent.height
            }
            PropertyChanges{
                target: fog
                visible: true
            }
        },
        State{
            name: "windowed"
            PropertyChanges{
                target: item
                width: 679
                height: 459
            }
            PropertyChanges{
                target: fog
                visible: false
            }
        }
    ]
    state : "windowed"

}
